<template>
    <div class="addPerson">
      <el-card class="box-card" shadow="never">
        <div style="margin:auto; width:400px;">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gendor">
              <el-radio-group v-model="ruleForm.gendor">
                <el-radio label="男" value="0"></el-radio>
                <el-radio label="女" value="1"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model.number="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="telNum">
              <el-input v-model.number="ruleForm.telNum"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
              <el-select v-model="ruleForm.type" placeholder="请选择类型">
                <!--<el-option label="请求服务器获得" value="shanghai"></el-option>-->
                <!--<el-option label="区域二" value="beijing"></el-option>-->
                <el-option v-for="option in options" :label="option.type" :value="option.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电子邮件" prop="email">
              <el-input v-model.number="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="addr">
              <el-input v-model.number="ruleForm.addr"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
              <el-button @click="resetForm('ruleForm')">关闭</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          gendor: '',
          age: '',
          telNum: '',
          type:'',
          email:'',
          addr:''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          // region: [
          //   { required: true, message: '请选择活动区域', trigger: 'change' }
          // ],
          telNum: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
          ],
          email:[
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          addr:[
            { required: true, message: '请输入地址', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ]
        },
        options:[]
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style>
  .box-card {
    margin:20px auto;
    width: 600px;
  }
</style>
